import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Edit, Trash2, BookText, MoreHorizontal } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";

export default function StandardCard({ standard, onEdit, onDelete }) {
  const getStatusConfig = (status) => {
    const configs = {
      active: { label: "现行", color: "bg-green-100 text-green-700" },
      inactive: { label: "废止", color: "bg-red-100 text-red-700" },
      superseded: { label: "被替代", color: "bg-yellow-100 text-yellow-700" },
    };
    return (
      configs[status] || { label: status, color: "bg-gray-100 text-gray-700" }
    );
  };

  const getCategoryLabel = (category) => {
    const labels = {
      national: "国家标准",
      industry: "行业标准",
      local: "地方标准",
      enterprise: "企业标准",
    };
    return labels[category] || category;
  };

  const statusConfig = getStatusConfig(standard.status);

  return (
    <Card className="group hover:shadow-lg transition-shadow duration-300 bg-white">
      <CardHeader className="pb-4">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center">
              <BookText className="w-6 h-6 text-green-600" />
            </div>
            <div>
              <CardTitle
                className="text-base font-bold text-gray-800 cursor-pointer hover:text-green-700"
                onClick={() => onEdit(standard)}
              >
                {standard.name || "未命名标准"}
              </CardTitle>
              <p className="text-sm text-gray-500 mt-1">
                {standard.code || "N/A"}
              </p>
            </div>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="opacity-0 group-hover:opacity-100 transition-opacity"
              >
                <MoreHorizontal className="w-4 h-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => onEdit(standard)}>
                <Edit className="w-4 h-4 mr-2" />
                编辑
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem
                onClick={() => onDelete(standard.id)}
                className="text-red-600"
              >
                <Trash2 className="w-4 h-4 mr-2" />
                删除
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        {standard.description && (
          <p className="text-sm text-gray-600 line-clamp-2 h-10">
            {standard.description}
          </p>
        )}
        <div className="text-xs text-gray-500 pt-2 border-t">
          <p>发布单位: {standard.issuingAuthority || "未知"}</p>
          <p>发布年份: {standard.publicationYear || "未知"}</p>
        </div>
        <div className="flex items-center gap-2">
          <Badge className={statusConfig.color}>{statusConfig.label}</Badge>
          <Badge variant="outline">{getCategoryLabel(standard.category)}</Badge>
        </div>
      </CardContent>
    </Card>
  );
}
